<template>
  <div class="home">
    <div style="margin: 20px 0">
      <el-button
        type="primary"
        style="margin: 10px"
        @click="addFormVisible = true"
        >新增</el-button
      >
      <el-input
        v-model="search"
        placeholder="输入角色查询"
        style="width: 100px"
      />
      <el-button @click="handleSearch">按角色查询</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" stripe height="450">
      <el-table-column type="index"> </el-table-column>
      <el-table-column prop="role" label="角色" width="180"></el-table-column>
      <el-table-column prop="menu" label="菜单" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button @click="handleDetail(scope.row)" type="text" size="small"
            >更多</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, jumper"
      :total="50"
      style="text-align: center"
      :current-page.sync="currentPage"
      @next-click="nextClick"
      @prev-click="prevClick"
      @current-change="currentChange"
    >
    </el-pagination>
    <!-- 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，
      除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，
      size用于设置每页显示的页码数量。 -->

    <!-- 新增弹窗 -->
    <el-dialog title="新增角色" :visible.sync="addFormVisible">
      <el-form
        :model="addForm"
        status-icon
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- prop 要和v-model 的属性一样，不然重置的时候回没有重置到 -->
        <el-form-item label="角色名" prop="role">
          <el-input v-model="addForm.role"></el-input>
        </el-form-item>
        <el-form-item label="菜单" prop="menu">
          <el-select v-model="addForm.selectedMenu" multiple placeholder="请选择">
            <el-option
              v-for="item in menuOptions"
              :key="item.id"
              :label="item.descr"
              :value="item.menu"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('addForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('addForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑角色" :visible.sync="editFormVisible">
      <el-form
        :model="editForm"
        status-icon
        ref="editForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- prop 要和v-model 的属性一样，不然重置的时候回没有重置到 -->
        <el-form-item label="角色名" prop="role">
          <el-input v-model="editForm.role"></el-input>
        </el-form-item>
        <el-form-item label="菜单" prop="selectedMenu">
          <el-select v-model="editForm.selectedMenu" multiple placeholder="请选择">
            <el-option
              v-for="item in menuOptions"
              :key="item.id"
              :label="item.descr"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('editForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog title="详情" :visible.sync="detaiFormVisibale">
      <el-form :model="detaiForm" status-icon label-width="100px">
        <!-- prop 要和v-model 的属性一样，不然重置的时候回没有重置到 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="detaiForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="detaiForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="detaiForm.role"></el-input>
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 以用户管理模块为模板
import request from "../utils/request";
export default {
  name: "Role",
  components: {},
  data() {
    return {
      addFormVisible: false,
      editFormVisible: false,
      detaiFormVisibale: false,
      search: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      addForm: {
        role: "",
        selectedMenu: [],
      },
      editForm: {
        role: "",
        selectedMenu: [],
      },
      detaiForm: {
        role: "",
        menu: "",
      },
      menuOptions: [
        {
          id: '1',
          menu: '大屏',
          descr: '大屏ddd'
        }
      ]
    };
  },
  created() {
    this.load();
    this.loadOptions()
  },
  methods: {
    load() {
      request
        .get("/role/page", {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: "",
        })
        .then((res) => {
          if (res.success) {
            this.tableData = res.result.records;
          }
        });
    },
    loadOptions() {
      request
        .get("/menu/list")
        .then((res) => {
          if (res.success) {
            this.menuOptions = res.result;
          }
        });
    },
    handleSearch() {
      request
        .get("/role/page", {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
        })
        .then((res) => {
          this.tableData = res.result.records;
        });
    },
    submitForm(formName) {
      console.log(this.addForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName == "editForm") {
            var newMenu = ''
            this.editForm.selectedMenu.forEach(e=>{
              newMenu += (e + ',')
            })
            var newObj = {
              id: this.editForm.id,//角色Id
              menu: newMenu,//菜单Id
              role: this.editForm.role
            }
            request.post("role/edit", newObj).then((res) => {
              if (res.success) {
                this.editFormVisible = false;
                this.$message.success(res.message);
                this.load();
              }
            });
          }
          if (formName == "addForm") {
            var menu = ''
            this.addForm.selectedMenu.forEach(e=>{
              menu += (e + ',')
            })
            request.post("role/add", {role: this.addForm.role,menu: menu}).then((res) => {
              console.log(res);
              if (res.success) {
                this.addFormVisible = false;
                this.$message.success(res.message);
                this.load();
              }
            });
          }
        } else {
          // this.$message.waring("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      // console.log(this.$refs[formName])
      this.$refs[formName].resetFields();
    },
    handleDetail(row) {
      // this.detaiFormVisibale = true;
    },
    handleEdit(row) {
      this.editFormVisible = true;
      this.editForm = row;
    },
    handleDelete(index, row) {
      console.log("deleting..", row);
      request.delet("role/delete/" + row.id).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.load();
        }
      });
    },
    nextClick() {
      this.currentPage += 1;
      this.load();
    },
    prevClick() {
      this.currentPage -= 1;
      this.load();
    },
    currentChange() {
      this.load();
    },
  },
};
</script>
